{% extends 'user.html' %}


{% block css %}
    <style>
        .error {
            color: red;
            position: absolute;

        }

        .layui-form-item {
            margin-bottom: 20px;
        }
    </style>
{% endblock %}

{% block left %}
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="{% url 'user_home' %}">书架</a>

        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">借阅详情</a>
            <dl class="layui-nav-child">
                <dd><a href="{% url 'my_borrow_book' %}">我的借书</a></dd>
                <dd><a href="{% url 'show_return_book' %}">我的还书</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">个人中心</a>
            <dl class="layui-nav-child">
                <dd class="layui-this"><a href="{% url 'user_detail' %}">账号详情</a></dd>
            </dl>
        </li>
    </ul>
{% endblock %}

{% block body %}
    <span class="layui-breadcrumb">
                <a href="{% url 'user_home' %}">首页</a>
                <a><cite>个人中心</cite></a>
                <a href="{% url 'user_detail' %}">账号详情</a>
            </span>
    <hr/>
    <div class="layui-card">
        <div class="layui-card-header">
            <h1 style="text-align: center">用户信息</h1>
        </div>
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">账户名</label>
                    <div class="layui-input-block">
                        <input style="color: grey" class="layui-input" type="text" id="username" value="{{ userInfo.username }}"
                               disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        {% if userInfo.sex is none %}
                            <input style="color: grey" class="layui-input" type="text" id="sex" value="待完善" disabled>
                        {% else %}
                            {% if userInfo.sex == 1 %}
                                <input style="color: grey" class="layui-input" type="text" id="sex" value="男" disabled>
                            {% else %}
                                <input style="color: grey" class="layui-input" type="text" id="sex" value="女" disabled>

                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        {% if userInfo.age is none %}
                            <input style="color: grey" class="layui-input" type="text" id="age" value="待完善" disabled>
                        {% else %}
                            <input style="color: grey" class="layui-input" type="text" id="age" value="{{ userInfo.age }}" disabled>
                        {% endif %}
                    </div>
                </div>
            </form>
        </div>
        <div style="text-align: right">
            <button class="layui-btn layui-btn-danger" onclick="changePwd()">修改密码</button>

            <button class="layui-btn layui-btn-normal" onclick="edit()">编辑信息</button>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        function changePwd() {
            layer.open({
                title: '修改密码',
                content: '<form class="layui-form">\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">原密码</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <input class="layui-input" type="password" id="password">\n' +
                    '            <p class="error" id="err_password"></p>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">新密码</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <input class="layui-input" type="password" id="Pwd">\n' +
                    '            <p class="error" id="err_Pwd"></p>\n' +
                    '\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">确认密码</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <input class="layui-input" type="password" id="rePwd">\n' +
                    '            <p class="error" id="err_rePwd"></p>\n' +
                    '\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '\n' +
                    '\n' +
                    '</form>',
                btn: ['确认', '取消'],
                yes: function () {
                    var flag = 1
                    if ($('#password').val() == '') {
                        flag = 0
                        $('#err_password').html('不能为空')
                    } else {

                        $('#err_password').html('')

                    }
                    if ($('#Pwd').val() == '') {
                        flag = 0
                        $('#err_Pwd').html('密码不能为空')
                    } else {
                        $('#err_Pwd').html('')
                    }
                    if ($('#rePwd').val() == '') {
                        flag = 0
                        $('#err_rePwd').html('密码不能为空')
                    } else {

                        if ($('#Pwd').val() != $('#rePwd').val()) {
                            $('#err_rePwd').html('两次密码不一致')
                            flag = 0
                        } else {
                            $('#err_rePwd').html('')
                        }
                    }
                    if (flag == 0) {
                        return
                    }
                    $.ajax({
                        url: '{% url 'edit_user_password' %}',
                        type: 'POST',
                        data: {'userPassword': $('#password').val(), 'userPwd': $('#Pwd').val()},
                        dataType: 'JSON',
                        success: function (res) {
                            if (!res.status) {
                                if (res.flag == 1)
                                    $('#err_password').html('密码错误')
                                else
                                    $('#err_rePwd').html('新密码不能与旧密码相同')

                            } else {
                                layer.open({
                                        content: '修改成功，请重新登录',
                                        btn: ['确认'],
                                        yes: function (index, layero) {
                                            location.href = '{% url 'login' %}'
                                        }
                                    }
                                )

                            }
                        }
                    })
                }
            })
        }

        function edit() {
            layer.open({
                title: '编辑信息',
                content: '<form class="layui-form">\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">性别</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            {% if userInfo.sex is none %}\n'+
                        '                <input class="layui-input" type="text" id="Tsex" placeholder="输入性别">\n'+
                        '            {% else %}\n'+
                        '                {% if userInfo.sex == 1 %}\n'+
                            '                                <input class="layui-input" type="text" id="Tsex" value="男" placeholder="输入性别">\n'
                            +
                            '                            {% else %}\n'+
                            '                                <input class="layui-input" type="text" id="Tsex" value="女" placeholder="输入性别">\n'
                            +
                            '\n'+
                            '                            {% endif %}\n'
                        +
                        '            {% endif %}\n' +
                    '            <p class="error" id="err_sex"></p>\n' +
                    '\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '    <div class="layui-form-item">\n' +
                    '        <label class="layui-form-label">年龄</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            {% if userInfo.age is none %}\n'+
                        '                <input class="layui-input" type="text" id="Tage" placeholder="输入年龄">\n'+
                        '            {% else %}\n'+
                        '                <input class="layui-input" type="text" id="Tage" value="{{ userInfo.age }}" placeholder="输入年龄">\n'
                        +
                        '            {% endif %}\n' +
                    '            <p class="error" id="err_age"></p>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</form>',
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    var flag = 1
                    if ($('#Tusername').val() == '') {
                        flag = 0
                        $('#err_username').html('不能为空')
                    } else {
                        $('#err_username').html('')

                    }
                    if ($('#Tsex').val() == '') {
                        flag = 0
                        $('#err_sex').html('不能为空')
                    } else {
                        $('#err_sex').html('')

                    }
                    if ($('#Tage').val() == '') {
                        flag = 0
                        $('#err_age').html('不能为空')
                    } else {
                        $('#err_age').html('')
                    }
                    if (flag == 0) return
                    $.ajax({
                        url: '{% url 'user_detail' %}',
                        type: 'POST',
                        data: {'sex': $('#Tsex').val(), 'age': $('#Tage').val()},
                        dataType: 'JSON',
                        success: function (res) {
                            layer.open({
                                content: '修改成功',
                                btn: ['确定'],
                                yes: function (index, layero) {
                                    location.href = '{% url 'user_detail' %}'
                                }
                            })
                        }
                    })


                }
            })
        }
    </script>
{% endblock %}